<template>
  <div class="header">
    <div class="top">
      <div class="left" v-if="!userName">
        <a-menu mode="horizontal" >
          <a-menu-item key="1">
            <router-link to="/home"
              ><a-icon type="home" />乐易购首页</router-link
            >
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/login">登录 </router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link to="register">注册</router-link>
          </a-menu-item>
           <a-menu-item key="4" class="t">
            <router-link :to="{path:'/shopcart'}"><a-icon type="shopping" />我的购物车 </router-link>
          </a-menu-item>
          <a-menu-item key="5">
            <router-link :to="{path:'/trade'}"><a-icon type="money-collect" />我的订单</router-link>
          </a-menu-item>
          <a-menu-item key="6">
            <router-link :to="{path:'/center'}"><a-icon type="user" />我的乐易购</router-link>
          </a-menu-item>
        </a-menu>
      </div>
         <div class="left" v-else>
        <a-menu mode="horizontal">
          <a-menu-item key="1">
            <router-link to="/home"
              ><a-icon type="home" />乐易购首页</router-link
            >
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/login">{{userName}} </router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <a to="/home" @click="logout">退出登录</a>
          </a-menu-item>  <a-menu-item key="4" class="t">
            <router-link :to="{path:'/shopcart'}"><a-icon type="shopping" />我的购物车 </router-link>
          </a-menu-item>
          <a-menu-item key="5">
            <router-link :to="{path:'/trade'}"><a-icon type="money-collect" />我的订单</router-link>
          </a-menu-item>
          <a-menu-item key="6">
            <router-link :to="{path:'/center'}"><a-icon type="user" />我的乐易购</router-link>
          </a-menu-item>
        </a-menu>
      </div>
      
    </div>
    <div class="bottom">
      <div class="logo">
<router-link to="/home"><img src="./images/logo.png" alt="乐易购" style="width:100px;height:100px"></router-link>
      </div>
      <div class="search">
           <a-input-search placeholder="请输入您想知道的内容" enter-button @search="onSearch" v-model="keyword"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      keyword:''
    }
  },
  computed:{
    //用户名信息
    userName(){
      return this.$store.state.user.userInfo.name;
    }
  },
  methods: {
    onSearch(){
      //query参数不需要占位--在配置路由的时候，在路由后面加上需要接收的参数
 //代表的是如果有query参数也带过去
      if (this.$route.params) {
        let loction = {
          name: "search",
          params: { keyword: this.keyword || undefined },
        };
        loction.query = this.$route.query;
        this.$router.push(loction);
      }
    },
      //退出登录
    async logout(){
      //退出登录需要做的事情
      //1:需要发请求，通知服务器退出登录【清除一些数据：token】
      //2:清除项目当中的数据【userInfo、token】
        try {
          //如果退出成功
          await this.$store.dispatch('userLogout');
          //回到首页
          this.$router.push('/home');
        } catch (error) {
          
        }
    }
  },
  mounted() {
    //通过全局事件总线清除关键字
    this.$bus.$on("clear", () => {
      this.keyword = "";
    });
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 148px;
  // background: red;
  & > .top {
    width: 1200px;
    height: 48px;
    margin: 0 auto;
    // background: yellowgreen;
    border-bottom: 1px solid #f0f0f0;
    .left {
      float: left;
      .t{
        margin-left: 500px;
      }
    }
  }
  & > .bottom {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    // background: rgb(50, 205, 66);
    .logo{
      padding-left: 100px;
      float: left;
    }
    .search{
      height: 30px;
      width: 600px;
        float: left;
   margin: 35px 200px;
    }
  }
}
</style>